<!-- 表格 -->
<template>
	<scroll-view scroll-x class="table_scroll">
		<view class="table">
			<view class="table_header flex">
				<view :style="{ width: item.width * 2 + 'rpx' }" v-for="(item, idx) in columns" :key="idx" :class="['td ', idx === columns.length - 1 ? '' : 'td_border_right']">
					{{ item.title }}
				</view>
			</view>
			<view class="table_row td_height flex" v-for="row in dataList" :key="row.id">
				<view v-for="(item, idx) in columns" :style="{ width: item.width * 2 + 'rpx' }" :key="idx" :class="['td flex_center', idx === columns.length - 1 ? '' : 'td_border_right']">
					<view class="td_img" v-if="item.type === 1" @tap.stop="viewImg(row[item.key])">
						<image v-if="row[item.key]" :src="getFileUrl(row[item.key], true)" mode="aspectFill"></image>
					</view>
					<view v-else class="">{{ row[item.key as keyof typeof item] }}</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { getFileUrl } from "@/utils/common";

// 定义 props 接口
interface Props {
	// tableConfig: ;
	// type 1图片
	columns: { width: number; title: string; key: string; type?: 1 | 2 | 3 }[];
	dataList: any[];
}

const props = withDefaults(defineProps<Props>(), {
	dataList: () => [],
	columns: () => []
});

// 预览图片
const viewImg = (uri: string) => {
	uni.previewImage({
		urls: [getFileUrl(uri, true)]
	});
};
</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}
image {
	width: 100%;
	height: 100%;
}
.table_scroll {
	border-radius: 10rpx;
	border: 1px solid #f0f0f0;
	box-sizing: border-box;
	width: 100%;
}
.td_height {
	min-height: 84rpx;
}
.table.table_material {
	width: 600px;
}
.td {
	text-align: center;
	padding: 20rpx 16rpx;

	.td_img {
		width: 72rpx;
		height: 72rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}
}
.td_border_right {
	border-right: 1px solid #f0f0f0;
}
.table {
	width: 100%;
	color: #333333;
	font-size: 28rpx;
	// margin-right: 24rpx;
	:last-child.table_row {
		border-bottom: none;
	}

	.table_header {
		height: 62rpx;
		background-color: #f7f8fa;
		color: #222222;
		font-weight: bold;
	}
	.table_row {
		border-bottom: 1px solid #f0f0f0;
		/* 让所有子项高度一致 */
		align-items: stretch;
	}
	.txt_hide {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>
